<template>
  <div>
    <top-bar></top-bar>
    <left-bar :datas='data'></left-bar>
    <div class="main">
      <div class="main-mains">
        <div class="main-content">
          <div class="main-mains-top">
            项目任务列表
          </div>
          <div class="main-top-nav">
            <ul>
              <router-link to="/projectTasks">
                <li class="active">项目任务列表</li>
              </router-link>
              <router-link to="/projectItem">
                <li>任务单元列表</li>
              </router-link>
            </ul>
          </div>
          <div class="screen clear">
            <div class="fl" @click="addProject()">新增</div>
            <div class="fl" @click="screen()">筛选</div>
          </div>
          <div class="publicTable toLongTable">
            <table class="head_table">
              <tr>
                <td width="8%">项目编号</td>
                <td width='20%'>项目名称</td>
                <td width='12%'>产商</td>
                <td width='8%'>创建时间</td>
                <td width='10%'>任务单元</td>
                <td width='7%'>操作</td>
              </tr>
            </table>
            <el-scrollbar>
              <table class="content_table">
                <tr v-for="(item,index) in listData" :key="index" :class="{active:index%2==1}">
                  <td width="8%">{{item.id}}</td>
                  <td width='20%'>{{item.topic}}</td>
                  <td width='12%'>{{item.company_name}}</td>
                  <td width='8%'>{{item.create_time | times}}</td>
                  <td width='10%'>
                    <span class="active" @click="addtaskss(item.id,item.topic)">添加</span><br>
                    <span class="active" @click="getProjectDetails(item.id)">查看</span>
                  </td>
                  <td width='7%'>
                    <span class="active" v-if="item.status==1" @click="startTask(item.id)">开启</span>
                    <span class="active" v-else @click="closeTask(item.id)">关闭</span>
                  </td>
                </tr>
              </table>
            </el-scrollbar>
          </div>
          <div class="nodataTip" v-if="showNodataTip">
            <i class="iconfont icon-zanwuneirong"></i>
            <h5>暂无内容</h5>
          </div>
          <div class="orderBotom">
            <div class="orderBotomRight">
              <el-pagination @current-change="handleCurrentChange" :page-size="15" layout="total, prev, pager, next" :total='totalnum'>
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
      <div class="system-menban" v-if="showSystemPopup || search || addtask">
      </div>
      <div class="systemPopup" v-if="showSystemPopup">
        <div class="topTitle">
          <span>新增项目任务</span>
          <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
        </div>
        <div class="systemPopup-con">
          <div class="systemPopup-cons clear">
            <div class="fl">项目名称</div>
            <div class="fl sel">
              <el-input placeholder="请输入项目名称" v-model.trim="name" clearable>
              </el-input>
            </div>
          </div>
          <div class="systemPopup-cons clear">
            <div class="fl">推广厂商</div>
            <div class="fl sel">
              <el-input placeholder="请输入推广厂商" v-model.trim="business" clearable>
              </el-input>
            </div>
          </div>
          <div class="systemPopup-btn clear">
            <div class="fl" @click="confirm()">确认</div>
            <div class="fl" @click="hideSystemPopup">取消</div>
          </div>
        </div>
      </div>
      <div class="systemPopup" v-if="search">
        <div class="topTitle">
          <span>筛选项目任务</span>
          <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
        </div>
        <div class="systemPopup-con">
          <div class="systemPopup-cons clear">
            <div class="fl">时间</div>
            <div class="fl sel">
              <el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </div>
          </div>
          <div class="systemPopup-cons clear">
            <div class="fl">关键词搜索</div>
            <div class="fl sel">
              <el-input placeholder="请输入任务名称/厂商/任务单元名称" v-model.trim="keyword" clearable>
              </el-input>
            </div>
          </div>
          <div class="systemPopup-btn clear">
            <div class="fl" @click="searchs()">确认</div>
            <div class="fl" @click="hideSystemPopup">取消</div>
          </div>
        </div>
      </div>
      <div class="systemPopup" v-if="addtask">
        <div class="topTitle">
          <span>添加任务单元</span>
          <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
        </div>
        <div class="systemPopup-con">
          <div class="systemPopup-cons clear">
            <div class="fl">项目名称</div>
            <div class="fl sel">
              {{taskTitle}}
            </div>
          </div>
          <div class="systemPopup-cons clear">
            <div class="fl">选择任务单元</div>
            <div class="fl sel">
              <el-select v-model="taskType" placeholder="请选择">
                <el-option v-for="item in taskOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="systemPopup-btn clear">
            <div class="fl" @click="addtaskquit()">确认</div>
            <div class="fl" @click="hideSystemPopup">取消</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import leftBar from "@/components/leftBar";
import topBar from "@/components/topBar";
import project from "@/api/saleProject";
export default {
  components: {
    leftBar,
    topBar
  },
  data() {
    return {
      data: "projectTasks",
      pages: 1,
      listData: [],
      name: "",
      business: "",
      showSystemPopup: false,
      totalnum: 0,
      showNodataTip: false,
      search: false,
      keyword: "",
      time: [],
      addtask: false,
      taskType: "",
      taskId: "",
      taskTitle: "",
      taskOptions: [
        {
          value: 1,
          label: "图文会议"
        },
        {
          value: 2,
          label: "医学课堂"
        },
        {
          value: 3,
          label: "医学调研"
        },
        {
          value: 4,
          label: "名师讲堂"
        },
        {
          value: 5,
          label: "线上会议"
        },
        {
          value: 6,
          label: "资讯管理"
        }
      ]
    };
  },
  methods: {
    closeTask(id) {
      this.$confirm("此操作将关闭该项目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const options = {
            id: id,
            status: 1
          };
          project.update(options).then(res => {
            if (res.code == 1) {
              this.$message({
                showClose: true,
                message: "操作成功！",
                type: "success"
              });
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    startTask(id) {
      this.$confirm("此操作将开启该项目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const options = {
            id: id,
            status: 2
          };
          project.update(options).then(res => {
            if (res.code == 1) {
              this.$message({
                showClose: true,
                message: "操作成功！",
                type: "success"
              });
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    addtaskss(id, title) {
      this.taskId = id;
      this.addtask = true;
      this.taskTitle = title;
    },
    addtaskquit() {
      if (this.taskType == "") {
        this.$message({
          showClose: true,
          message: "请选择任务单元！",
          type: "error"
        });
        return false;
      }
      switch (this.taskType) {
        case 1:
          this.$router.push("/addTeletext?id=" + this.taskId);
          break;
        // case 2:
        //   this.$router.push("/addTeletext?id=" + this.taskId);
        //   break;
        case 3:
          this.$router.push("/addmedical?id=" + this.taskId);
          break;
      }
    },
    getProjectDetails(id) {
      const options = {
        spid: id
      };
      project.saleDetail(options).then(res => {});
    },
    searchs() {
      this.pages = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pages = val;
      this.getList();
    },
    getList() {
      this.showNodataTip = false;
      let options = {};
      if (this.time == "" || this.time == null) {
        options = {
          page: this.pages,
          key: this.keyword,
          from_time: "",
          to_time: ""
        };
      } else {
        options = {
          page: this.pages,
          key: this.keyword,
          from_time: this.time[0],
          to_time: this.time[0]
        };
      }
      project.getList(options).then(res => {
        if (res.code == 1) {
          this.search = false;
          this.listData = res.data.data;
          this.totalnum = res.data.total;
          if (!res.data.total) {
            this.showNodataTip = true;
          }
        }
      });
    },
    addProject() {
      this.showSystemPopup = true;
    },
    screen() {
      this.search = true;
    },
    confirm() {
      if (this.name == "") {
        this.$message({
          showClose: true,
          message: "请输入项目名称",
          type: "error"
        });
        return false;
      }
      if (this.business == "") {
        this.$message({
          showClose: true,
          message: "请输入推广厂商",
          type: "error"
        });
        return false;
      }
      const options = {
        topic: this.name,
        company: this.business
      };
      project.create(options).then(res => {
        if (res.code == 1) {
          this.pages = 1;
          this.time = "";
          this.getList();
          this.showSystemPopup = false;
        }
      });
    },
    hideSystemPopup() {
      this.showSystemPopup = false;
      this.search = false;
      this.addtask = false;
    }
  },
  mounted() {
    this.getList();
  },
  filters: {
    times(value) {
      var time = new Date(value * 1000);
      var month =
        time.getMonth() + 1 > 9
          ? time.getMonth() + 1
          : "0" + (time.getMonth() + 1);
      var data = time.getDate() > 9 ? time.getDate() : "0" + time.getDate();
      var hour = time.getHours() > 9 ? time.getHours() : "0" + time.getHours();
      var minutes =
        time.getMinutes() > 9 ? time.getMinutes() : "0" + time.getMinutes();
      var second =
        time.getSeconds() > 9 ? time.getSeconds() : "0" + time.getSeconds();
      var times =
        time.getFullYear() +
        "-" +
        month +
        "-" +
        data +
        " " +
        hour +
        ":" +
        minutes +
        ":" +
        second;
      return times;
    }
  }
};
</script>

<style>
</style>
